<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 500px;
            background-color: cornflowerblue;
            height: 500px;
            border: 2px solid gray;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;  /*设置fr单位可让元素铺满 表示列 有几个数字表示几列*/
            /* grid-template-columns: 200px 200px 200px;
               设置几列
            */
            column-gap: 1px;  /*设置列间距*/
            
            row-gap: 1px;     /*设置行间距*/
            /* gap           统一设置 行列间距 */

            /* 竖直方向对齐方式 */
            align-items:center;  /*initial靠上 center居中 flex-end靠下*/

            /* 水平方向上对齐方式 */
            justify-items: center;
            /* end靠右对齐  space-between两端对齐 */

            /* 对子元素进行编辑对齐方式 */
            /*竖直方向*/
            align-content: center;  /*center居中 end靠下*/
            /* 水平方向 */
            justify-content:center; /*space-between两端对齐*/
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: greenyellow;
            box-sizing: border-box;
            border: 1px solid grey;
            text-align: center;
        }
        .layout{
            display: grid;
            height: 500px;
            width: 500px;
            background-color: cornflowerblue;
            border: 1px solid grey;
            box-sizing: border-box;
            /* 指定样式 */
            grid-template-areas:
            "header header header"
            "sidebar content content"
            "footer footer footer";
        }
        header{
            grid-area: header;
        }
        main{
            grid-area: content;
        }
        aside{
            grid-area: sidebar;
        }
        footer{
            grid-area: footer;
        }
        .layout .yangshi{
            background-color: grey;
            border: 1px solid black;
            box-sizing: border-box;
        }

    </style>

</head>

<body>
    <div class="box1">
        <div class="box2">column1</div>
        <div class="box2">column2</div>
        <div class="box2">column3</div>
        <div class="box2">column4</div> 
        <div class="box2">column5</div> 
        <!-- <div class="box2">column6</div>  -->
    </div>

    <div class="layout">
        <header class="yangshi">头部</header>
        <aside class="yangshi">侧边栏</aside>
        <main class="yangshi">内容</main>
        <footer class="yangshi">底部</footer>
    </div>

</body>
</html>